<template>
    <!--综合布局 -->
    <div
        :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
        class="vab-layout-comprehensive"
    >
        <vab-side-bar layout="comprehensive"/>
        <div
            :class="{
        'is-collapse-main': collapse,
      }"
            class="vab-main"
        >
            <div
                :class="{
          'fixed-header': fixedHeader,
        }"
                class="vab-layout-header"
            >
                <vab-nav layout="comprehensive"/>
                <vab-tabs v-show="showTabs"/>
            </div>
            <vab-app-main/>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import {Component, Prop} from 'vue-property-decorator';

@Component({})
export default class VabLayoutComprehensive extends Vue {
    @Prop({type: Boolean, default: false})
    private collapse;

    @Prop({type: Boolean, default: true})
    private fixedHeader;

    @Prop({type: Boolean, default: true})
    private showTabs;

    @Prop({type: String, default: 'desktop'})
    private device;
}
</script>

<style lang="scss" scoped>
.vab-layout-comprehensive {
    .fixed-header {
        left: $base-left-menu-width;
        width: $base-right-content-width;
    }
}
</style>
